
<!-- Copyright 2018 Google Inc. All rights reserved.
    Copyright 2018 王下邀月熊. All rights reserved.

    Licensed under the Apache License, Version 2.0 (the "License"); you may not
    use this file except in compliance with the License. You may obtain a copy of
    the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
    WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
    License for the specific language governing permissions and limitations under
    the License. -->
<meta charset="utf-8">

<meta name="viewport"
  content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

<title>Cendertron</title>
<meta name="description"
  content="Rendertron - headless rendering service">

<link href="https://fonts.googleapis.com/css?family=Orbitron"
  rel="stylesheet">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">


<a href="https://github.com/wxyyxc1992/Chaos-Scanner/blob/master/crawlers/cendertron"
  class="github-corner"
  aria-label="View source on Github"
  target="_blank">

  <svg width="80"
    height="80"
    viewBox="0 0 250 250"
    style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
    aria-hidden="true">
    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />


    <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
      fill="currentColor"
      style="transform-origin: 130px 106px;"
      class="octo-arm" />


    <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
      fill="currentColor"
      class="octo-body" />

  </svg>
</a>

<style>
  .github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }

  @keyframes octocat-wave {
    0%,
    100% {
      transform: rotate(0);
    }
    20%,
    60% {
      transform: rotate(-25deg);
    }
    40%,
    80% {
      transform: rotate(10deg);
    }
  }

  @media (max-width: 500px) {
    .github-corner:hover .octo-arm {
      animation: none;
    }
    .github-corner .octo-arm {
      animation: octocat-wave 560ms ease-in-out;
    }
  }
</style>

<style>
  body {
    background: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    margin: 0;
    min-height: calc(100vh - 40px);
    padding: 20px 0;
  }

  h1 {
    font-size: 60px;
    color: white;
    border-bottom: 1px solid #99f3ff;
    margin: 64px 32px;
  }

  #search-bar {
    min-width: 300px;
    width: calc(100% - 40px);
    max-width: 664px;
    position: relative;
    box-sizing: border-box;
  }

  input[type=url] {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    border: none;
    font-size: 24px;
    background: black;
    border-radius: 10px;
    border: 2px solid #99f3ff;
    color: white;
    font-family: 'Orbitron', sans-serif;
    text-align: center;
  }

  progress-bar {
    --progress-bar-color: #99f3ff;
    height: 10px;
    position: absolute;
    margin-top: -10px;
    border-radius: 0 0 10px 10px;
  }

  #options {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
    justify-content: center;
  }

  #options > * {
    margin: 32px;
  }

  #options button {
    display: block;
    width: 150px;
    height: 150px;
    border: 1px solid #99f3ff;
    color: white;
    background: none;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-family: 'Orbitron', sans-serif;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .loading {
    box-shadow: #99f3ff 0px 0px 7px 4px;
    animation: pulse 1s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
  }

  .error {
    border-color: #ff9999 !important;
  }

  @keyframes pulse {
    from {
      filter: blur(0px);
      transform: none;
    }
    to {
      filter: blur(1px);
      transform: scale(1.05);
    }
  }

  #options button i {
    font-size: 48px;
  }

  #options button span {
    margin-top: 24px;
    max-width: 200px;
    line-height: 24px;
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  :focus,
  #url:focus,
  #options button:hover {
    transition: 100ms box-shadow cubic-bezier(0, 0, 0.2, 1);
    box-shadow: #99f3ff 0px 0px 7px 4px;
  }

  @media (max-width: 500px) {
    h1 {
      font-size: 40px;
    }
  }
</style>
<h1>Cendertron</h1>

<div id="search-bar">
  <input id="url"
    type="url"
    placeholder="Enter a URL"
    autocapitalize="off"
    spellcheck="false">

  <progress-bar hidden />

</div>

<div id="options">

  <button onclick="extractApi(this, false)">
    <i class="material-icons">all_out</i>
    <span>Crawler | 爬虫</span>
  </button>

  <button onclick="render(this, false)">
    <i class="material-icons">cloud_upload</i>
    <span>Render | 渲染</span>
  </button>

  <button onclick="takeScreenshot(this)">
    <i class="material-icons">photo_camera</i>
    <span>Screeshot</span>
  </button>

  <button onclick="render(this, true)">
    <i class="material-icons">mobile_friendly</i>
    <span>Mobile | 移动渲染</span>
  </button>
</div>

<script>
  function encodeUrl(fullUrl) {
    var url = new URL(fullUrl);
    return (
      url.origin +
      url.pathname +
      encodeURIComponent(url.search) +
      encodeURIComponent(url.hash)
    );
  }

  function render(element, isMobile) {
    if (!url.value) {
      onEmptyUrl();
      return;
    }

    element.classList.add("loading");
    document.querySelector("progress-bar").removeAttribute("hidden");
    window.location.href += `render/${encodeUrl(url.value)}${isMobile
      ? "?mobile"
      : ""}`;
  }

  function takeScreenshot(element) {
    if (!url.value) {
      onEmptyUrl();
      return;
    }

    var httpRegex = /(http(s?))\:\/\//gi;

    if (!httpRegex.test(url.value)) {
      url.value = "https://" + url.value;
    }

    element.classList.add("loading");
    document.querySelector("progress-bar").removeAttribute("hidden");
    window.location.href += `screenshot/${encodeUrl(
      url.value
    )}?width=${window.innerWidth}&height=${window.innerHeight}`;
  }

  function extractApi(element) {
    if (!url.value) {
      onEmptyUrl();
      return;
    }

    var httpRegex = /(http(s?))\:\/\//gi;

    if (!httpRegex.test(url.value)) {
      url.value = "https://" + url.value;
    }

    element.classList.add("loading");
    document.querySelector("progress-bar").removeAttribute("hidden");
    window.location.href += `scrape/${encodeUrl(url.value)}`;
  }

  function onEmptyUrl() {
    url.classList.add("error");
  }

</script>
<link rel="import"
  href="progress-bar.html">
